<template>
  <div>
    <el-tabs v-model="activeName2" type="card" v-loading="loading3"
      element-loading-text="数据加载中。。。。"
      element-loading-spinner="el-icon-loading">
      <el-tab-pane label="基础信息" name="second">
        <div class="second-contain">
          <div class="head">
            <h1>基础信息</h1>
          </div>
          <div class="second-contain-box2 ma">
            <el-row>
              <el-col :span="8">
                <span>意向客户：{{pageData.agentName}}</span>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <span>联系人：{{pageData.contacts}}</span>
              </el-col>
              <el-col :span="8">
                <span>联系电话：{{pageData.contactPhone}}</span>
              </el-col>
              <el-col :span="8">
                <span>客户来源：{{pageData.customerSource}}</span>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <span>备用电话1：{{pageData.phone1}}</span>
              </el-col>
              <el-col :span="8">
                <span>备用电话2：{{pageData.phone2}}</span>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <span>地区：{{address+pageData.address}}</span>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <span>客户类型：{{pageData.customerType}}</span>
              </el-col>
              <el-col :span="8">
                <span>客户进展：{{pageData.customerProgress}}</span>
              </el-col>
              <el-col :span="8">
                <span>行业/职位：{{pageData.industry}}</span>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <span>性别：{{pageData.sex}}</span>
              </el-col>
              <el-col :span="8">
                <span>年龄：{{pageData.age}}</span>
              </el-col>
              <el-col :span="8">
                <span>学历：{{pageData.education}}</span>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <span>关键字：{{pageData.keyWord}}</span>
              </el-col>
              <el-col :span="8">
                <span>城市类型：{{pageData.cityType}}</span>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                客户备注：{{pageData.customerRemark}}
              </el-col>
            </el-row>
          </div>
        </div>
        <div class="second-contain"  style="margin-top:20px;">
          <div class="second-contain-box2 ma">
            <!-- <el-row>
              <el-col :span="8">
                <span>微信：{{pageData.wechat}}</span>
              </el-col>
              <el-col :span="8">
                <span>QQ:{{pageData.qq}}</span>
              </el-col>
              <el-col :span="8">
                <span>邮箱：{{pageData.email}}</span>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <span>投资动机：{{pageData.investmentMotive}}</span>
              </el-col>
              <el-col :span="8">
                <span>可用于投资资金:{{pageData.investmentFund}}</span>
              </el-col>
              <el-col :span="8">
                <span>风险偏好：{{pageData.riskPreference}}</span>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <span>意向区域：{{pageData.intentionalRegion}}</span>
              </el-col>
              <el-col :span="8">
                <span>意向产品:{{pageData.intentionalProduct}}</span>
              </el-col>
              <el-col :span="8">
                <span>意向合作模式：{{pageData.intentionalCooperationModel}}</span>
              </el-col>
            </el-row> -->
          </div>
          <div class="head">
            <h1>签约信息</h1>
          </div>
          <div class="second-contain-box2 ma">
            <el-row>
              <el-col :span="6">
                <span>合同类型：{{AgentSignInfoData.contractType}}</span>
              </el-col>
              <el-col :span="6">
                <span>签约款：{{AgentSignInfoData.contractMoney}}元</span>
              </el-col>
              <el-col :span="6">
                <span>付款情况：{{AgentSignInfoData.paymentSituation}}</span>
              </el-col>
              <el-col :span="6">
                <span>待付款时间：{{AgentSignInfoData.paymentDate}}</span>
              </el-col>
            </el-row>
          </div>
            <div class="second-contain-box2 ma">
            <el-row>
              <el-col :span="24">
                <span>签约备注：{{AgentSignInfoData.remark}}</span>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <span>创建时间：{{pageData.createDate}}</span>
              </el-col>
              <el-col :span="12">
                <span>更新时间：{{pageData.updateDate}}</span>
              </el-col>
            </el-row>
          </div>
        </div>
         <div class="third-contain-box">
          <div class="head">
            <h1>客户跟进</h1>
          </div>
          <Crm-table
            :showBatchDelete="showBatchDelete"
            class="table-width"
            permsEdit="sys:user:edit"
            permsDelete="sys:user:delete"
            :data="AgentqueryTrackingData"
            :columns="columns"
            :loading="loading"
            @handleFollow="handleFollow"
            @findPage2='findPage2'
          ></Crm-table>
        </div>
        <!-- <div class="third-contain-box">
          <div class="head">
            <h1>外呼记录</h1>
          </div>
          <Crm-table
            :showBatchDelete="showBatchDelete"
            class="table-width"
            permsEdit="sys:user:edit"
            permsDelete="sys:user:delete"
            :data="studentCallInfoList"
            :columns="columns2"
            :loading="loading1"
            @findPage='findPage'
          ></Crm-table>
        </div>  -->
      </el-tab-pane>
      <!-- <el-tab-pane label="跟进情况" name="third">
       
      </el-tab-pane> -->
      <!-- <el-tab-pane label="学生评测" name="fourth">学生评测内容</el-tab-pane> -->
    </el-tabs>
    <KtButton
      :label="$t('action.close')"
      perms="true"
      size="medium"
      style="margin-top: 2%;"
      @click="closeSelectedTag()"
    ></KtButton>
  </div>
</template>
<script>
import { hasPermission } from "@/permission/index.js";
import axios from "axios";
import KtButton from "@/views/Core/KtButton";
import api from "@/http/api";
import CrmTable from "@/views/Core/CrmTable";
import { CodeToText } from "element-china-area-data";
export default {
  name: "ChinaeduAgent",
  components: {
    KtButton,
    CrmTable
  },
  data: function() {
    return {
      // filters: {
      //     name: ""
      // },
      loading: false,
      loading1: false,
      loading2: false,
      loading3:false,
      selection: false,
      showBatchDelete: false,
      activeName2: "second",
      stuTableData: {
        studentInfo: {},
        studentInfoAttr: {}
      },
      address: "",
      listStudentSignInfo: [],
      // 客户跟进数据
      AgentqueryTrackingData: {
        content: []
      },
      studentCallInfoList: {
        content: []
      },
      listStudentSignInfoData: {
        content: []
      },
      type: [],
      student_progress_options: [],
      student_communication_type: [],
      pageData: {}, //代理商基本信息
      AgentSignInfoData: [], //代理商签约信息
      student_data_from:[],
      type:[],
      student_progress_options:[],
      // 订单表格数据
      columns: [
        { type: "index", label: "序号", minWidth: 10 },
        { prop: "trackingDate", label: "跟进时间", minWidth: 100 },
        { prop: "trackingContact", label: "联系人", minWidth: 50 },
        { prop: "communicationType", label: "沟通形式", minWidth: 50 },
        { prop: "customerType", label: "客户类型", minWidth: 50 },
        { prop: "customerProgress", label: "客户进展", minWidth: 50 },
        { prop: "communicationContent", label: "沟通内容", minWidth: 300 },
        { prop: "creater", label: "跟进人", minWidth: 50 },
        { prop: "nextTrackingDate", label: "下次跟进时间", minWidth: 100 }
      ],
      columns2: [
        { type: "index", label: "序号", minWidth: 10 },
        { prop: "callDate", label: "外呼时间", minWidth: 80 },
        { prop: "connectStatus", label: "是否接通", minWidth: 80 },
        { prop: "callDuration", label: "通话时长（秒）", minWidth: 80 },
        { prop: "seatNumber", label: "坐席号", minWidth: 100 },
        { prop: "tqNumber", label: "TQ号", minWidth: 70 },
        { prop: "callPeopleStr", label: "外呼人员", minWidth: 100 }
      ],
       callList:{
        customerNumber:this.$route.query.customerNumber
      },
      pageResult: {},
      pageSize: 0,
      pageNum: 0,
      pageRequest: { pageNum: 1, pageSize: 10 }
    };
  },
  watch: {
    // $route: "getParams"
  },
  beforeMount: function() {
    //   请求页面传过来的ID根据ID发送请求
    let routerParams = this.$route.query;
    this.get_investment_customer_from()
    this.get_progress()
    this.get_customer_type()
  },
  methods: {
    hasPerms: function(perms) {
      // 根据权限标识和外部指示状态进行权限判断
      return hasPermission(perms) & !this.disabled;
    },
    handleFollow(params) {
      this.dataForm = Object.assign({}, params.row);
      this.$router.push({
        path: "/Follow/AgentFollow",
        query: {
          id: params.row.id,
          agentName:this.pageData.agentName
        }
      });
    },
    closeThisTag(view) {
      this.$store.dispatch("delThisViews", view).then(views => {});
    },
     // 客户类型
    get_customer_type() {
      this.type=JSON.parse(localStorage.getItem('investmentType'))
    },
    // 客户进展
    get_progress() {
      this.student_progress_options=JSON.parse(localStorage.getItem('investmentProgress'))
    },
    // 获取来源
    get_investment_customer_from(){
      this.student_data_from=JSON.parse(localStorage.getItem('investmentSource'))
    },
    get_page_data() {
      this.loading3=true
      this.$api.agent
        .investmentQueryAgentIfo({
          customerId: this.$route.query.id
        })
        .then(res => {
          this.pageData = res.investmentInfo;
          let province = res.investmentInfo.province;
          let city = res.investmentInfo.city;
          let area = res.investmentInfo.area;
          let address = res.investmentInfo.address
          this.loading3=false
          // 当用户输入了详细地址
          if(address==null||address=="null"){
            if(province==null&&city==null&&area==null||province=='null'&&city=='null'&&area=='null'){
              this.address=" "
            }else if(province==""&&city==null&&area==null){
              this.address = CodeToText[res.investmentInfo.province]
            }else if(province!=""&&city==""&&area==null){
              this.address = CodeToText[res.investmentInfo.province] + CodeToText[res.investmentInfo.city]
            }else if(province!=""&&city!=""&&area==""||province!=""&&city!=""&&area!=""){
              this.address = CodeToText[res.investmentInfo.province] + CodeToText[res.investmentInfo.city]+ CodeToText[res.investmentInfo.area]
            }
            this.pageData.address=''
          }else if(address!=null||address!="null"){
             if(province==null&&city==null&&area==null||province=='null'&&city=='null'&&area=='null'){
              this.address=" "
            }else if(province==""&&city==null&&area==null){
              this.address = CodeToText[res.investmentInfo.province]
            }else if(province!=""&&city==""&&area==null){
              this.address = CodeToText[res.investmentInfo.province] + CodeToText[res.investmentInfo.city]
            }else if(province!=""&&city!=""&&area==""||province!=""&&city!=""&&area!=""){
              this.address = CodeToText[res.investmentInfo.province] + CodeToText[res.investmentInfo.city]+ CodeToText[res.investmentInfo.area]
            }
            this.pageData.address=address
          }


          // if(res.investmentInfo.province==null&res.investmentInfo.city==null&res.investmentInfo.area==null&res.investmentInfo.address==null||
          //       res.investmentInfo.province=='null'&res.investmentInfo.city=='null'&res.investmentInfo.area=='null'&res.investmentInfo.address=='null'||
          //       res.investmentInfo.province=="null"&res.investmentInfo.city=="null"&res.investmentInfo.area=="null"&res.investmentInfo.address==null
          //     ){
          //       this.address=" "
          //       this.pageData.address=''
          //   }else if(res.investmentInfo.province==null&res.investmentInfo.city==null&res.investmentInfo.area==null&res.investmentInfo.address!=null||
          //       res.investmentInfo.province=='null'&res.investmentInfo.city=='null'&res.investmentInfo.area=='null'&res.investmentInfo.address!='null'){
          //       this.address = ''
          //       this.pageData.address=res.investmentInfo.address
          //       }
          //   else if(res.investmentInfo.address==null){
          //       this.address = CodeToText[res.investmentInfo.province] + CodeToText[res.investmentInfo.city] + CodeToText[res.investmentInfo.area];
          //       this.pageData.address=''
          //   }else if(res.investmentInfo.province!=null&&res.investmentInfo.city!=null&&res.investmentInfo.area!=null&&res.investmentInfo.address!=null||
          //       res.investmentInfo.province!='null'&&res.investmentInfo.city!='null'&&res.investmentInfo.area!='null'&&res.investmentInfo.address!='null'){
          //       this.address = CodeToText[res.investmentInfo.province] + CodeToText[res.investmentInfo.city] + CodeToText[res.investmentInfo.area];
          //       this.pageData.address=res.investmentInfo.address
          //   }
          // 处理性别
          if(this.pageData.sex==1||this.pageData.sex=='男'){
            this.pageData.sex='男'
          }else if(this.pageData.sex==2||this.pageData.sex=='女'){
            this.pageData.sex='女'
          }else{
            this.pageData.sex=''
          }
           //    客户来源
          this.student_data_from.forEach(item => {
            if (item.key == this.pageData.customerSource) {
              this.pageData.customerSource = item.value;
            }
          });
          // 客户类型
          this.type.forEach(item => {
              if (item.key == this.pageData.customerType) {
                this.pageData.customerType = item.value;
              }
          });
          // 客户进展
          this.student_progress_options.forEach(item => {
              if (item.key == this.pageData.customerProgress) {
                this.pageData.customerProgress = item.value;
              }
          });
        });
        this.$api.agent
          .investmentQuerySignInfo({
            customerId: this.$route.query.id
          })
          .then(res => {
            this.AgentSignInfoData = res.investmentSignInfo;
          });
    },
    // 查询代理商跟进日志
    findPage2(data) {
      if (data !== null) {
        this.loading=true
        this.pageRequest = data.pageRequest;
      }
      this.$api.agent
        .investmentTrackingById({ customerId: this.$route.query.id,pageSize:this.pageRequest.pageSize,pageNum: this.pageRequest.pageNum})
        .then(res => {
          let content = {
            content: res.investmentTrackingVos,
            totalSize: res.total
          };
          this.loading=false
          this.AgentqueryTrackingData = content;
        }).then(data != null ? data.callback : "");
    },
    isActive(route) {
      return route.path === this.$route.path;
    },
    closeSelectedTag(view) {
      this.$store.dispatch("delVisitedViews", this.$route).then(views => {
        if (this.isActive(this.$route)) {
          const latestView = views.slice(-1)[0];
          if (latestView) {
            this.$router.push(latestView);
          } else {
            this.$router.push("/");
          }
        }
      });
    },
    // 获取外呼记录
    findPage(data){
      if (data !== null) {
        this.loading=true
        this.pageRequest = data.pageRequest;
      }
        this.callList.pageSize = this.pageRequest.pageSize;
        this.callList.pageNum = this.pageRequest.pageNum;
        this.$api.agent.callOnlineSchoolList(this.callList).then(res=>{
            let content = {'content':res.investmentCallInfoVo,'totalSize':res.total};
            this.studentCallInfoList=content;
            this.loading=false
            this.studentCallInfoList.content.forEach(item => {
                item.connectStatus=item.connectStatus==1?'接通':'未接通'
            })
        }).then(data != null ? data.callback : "");
    },
  },

  mounted() {
    this.get_page_data();
    // this.get_student_call_list()
  },
  created() {}
};
</script>
<style lang='scss' scoped>
.third-contain-box {
  text-align: left;
  width: 90%;
  margin: 20px auto;
  border: 1px solid #e4e7ed;
  overflow: hidden;
  .head h1 {
    font-size: 20px;
    font-weight: bold;
    padding: 20px;
  }
}
.second-contain .second-contain-box2 .el-row {
    margin-bottom: 20px;
}
.second-contain {
  text-align: left;
  width: 90%;
  margin: 0 auto;
  border: 1px solid #e4e7ed;
  .head h1 {
    font-size: 20px;
    font-weight: bold;
    padding: 20px;
  }
  .second-contain-box2 {
    width: 95%;
    margin: 0 auto;
    .el-row {
      margin-bottom: 20px;
    }
    .el-form {
      display: flex;
      flex-direction: row;
      justify-content: space-around;
      .el-form-item {
        display: flex;
        margin-left: 20px;
      }
    }
    .el-table td {
      border-bottom: 0px !important;
    }
    .address span {
      display: inline-block;
      margin: 0 20px;
    }
  }
}
.stu-btn {
  margin: 20px 0;
}
</style>
<style lang="scss">
.second-contain-box2 {
  width: 95%;
  .el-table td,
  .el-table th.is-leaf {
    border-bottom: 0px !important;
  }
  .has-gutter {
    display: none;
  }
  .el-row {
    margin: 20px 0;
  }
  .el-row .el-col{
      margin-left: 0!important;
  }
}
</style>


